<template>
	<view class="content" :style="{background: `url(${imgPath}storage/home/home_bg.png)`,backgroundSize: '100%'}">
		<view class="box">
			<view class="header-box">
				<view class="goods">
					<view class="img">
						<u--image :showLoading="true" :src="info.product_img" width="180rpx" height="180rpx"></u--image>
					</view>
					<view class="text">
						<view class="top">
							{{info.product_name}}
						</view>
						<view class="bottom">
							X 1
						</view>
					</view>
					<view class="num">
						¥{{info.price}}
					</view>
				</view>
				<template v-if="info.apply_type>0 && info.return_status==2">
					<view class="line"></view>
					<view class="ems-box">
						<u-icon name="car" size="34"></u-icon>
						<span>退货信息:</span>
						<u--input placeholder="点击填写退货运单号" border="none" v-model="FormData.return_no"></u--input>
					</view>

				</template>

			</view>
			<view class="service-box">
				<view class="item-box">
					<view class="left-box">
						申请类型
						<span class="red-text">*</span>
					</view>
					<view class="right-box" @click="show=true">
						{{selectObj.label}}
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item-box">
					<view class="left-box">
						{{selectObj.id==1?'退款原因':'申请原因'}}
						<span class="red-text">*</span>
					</view>
					<view class="right-box" @click="showReason=true">
						<span v-if="!FormData.reason" class="nodata">请选择</span>
						<span v-else>{{FormData.reason}}</span>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item-box price-box" v-if="selectObj.id==1">
					<view class="left-box">
						退款金额
						<span class="red-text">*</span>
					</view>
					<view class="right-price">
						<u--input color="#D06122" fontSize="48rpx" border="surround" v-model="FormData.refund_amount"
							@change="changePrice" @focus="onfocus"></u--input>
						<view class="tips-box" v-if="changeFoucs==1" @click="changeFoucs=0">点击可编辑申请金额</view>
					</view>
				</view>
			</view>
			<view class="address-box" v-if="selectObj.id==2">
				<view class="left-box">
					<u--image :showLoading="true" :src="imgPath + 'storage/home/address-icon.png'" width="28rpx"
						height="32rpx"></u--image>
				</view>
				<view class="right-box">
					<view class="info-box">
						<view class="text-box">
							<text class="big-text">{{info.address.name}} </text>
							<text class="small-text">{{info.address.mobile}} </text>
						</view>
						<view class="text-box">
							<text class="small-text">{{info.address.address}}{{info.address.detail_address}}</text>
						</view>
					</view>
					<view class="icon-box">
						<u-icon name="arrow-right" size="15" color="#878787"
							@click="replication(info.order_no)"></u-icon>
					</view>
				</view>
			</view>

			<view class="apply-box">
				<view class="top-box">
					<view class="left-box">
						补充描述和凭证
					</view>
					<view class="right-box">
						{{FormData.describe.length}}/100
					</view>
				</view>
				<view class="tips-box">
					<textarea v-model="FormData.describe" maxlength="100" placeholder="点击可编辑，有助于商家更好处理售后问题"></textarea>
				</view>
				<view class="upload-box">
					<u--image class="u-image-box" @click="chooseImage" :showLoading="true"
						:src="FormData.proof?imgPath + FormData.proof:imgPath + 'storage/home/camara-icon.png'"
						width="140rpx" height="140rpx"></u--image>
				</view>
			</view>
			<view class="apply-box mobile-box">
				<view class="top-box">
					<view class="left-box">
						联系电话
					</view>
					<view class="right-box">
						13234687654
					</view>
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="commitForm" v-if="!FormData.return_no">提交</view>
		<view class="submit-btn" @click="returnBack" v-else>返回</view>
		<u-picker :show="show" :columns="columns" keyName="label" @cancel="show=false" @confirm="confirmSelect"
			@close="show=false"></u-picker>
		<u-picker :show="showReason" :columns="reasonList" keyName="name" @cancel="showReason=false"
			@confirm="confirmReason" @close="showReason=false"></u-picker>
	</view>
</template>

<script>
	import {
		pay
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				imgPath: this.$store.state.user.baseURL,
				info: {},
				id: '',
				massageinfo: '',
				upLoadImg: 'storage/home/camara-icon.png',
				show: false,
				showReason: false,
				FormData: {
					product_id: '',
					order_id: '',
					mobile: '',
					apply_type: '',
					refund_amount: '',
					describe: '',
					return_no: '',
					proof: '',
					reason: '',
				},
				value: '',
				columns: [
					[{
							id: '1',
							label: '退货退款'
						},
						{
							id: '2',
							label: '换货'
						}
					]
				],
				selectObj: {
					id: '1',
					label: '退货退款'
				},
				reasonList: [],
				changeFoucs: 1,
			};
		},
		onLoad(e) {
			this.id = e.id
			this.selectObj = this.columns[0][e.type]
			this.getInfo()
			this.getReason()
		},
		methods: {
			returnBack() {
				uni.navigateBack()
			},

			commitForm() {
				this.FormData.apply_type = this.selectObj.id;
				this.$api.aftersaleApply(this.FormData).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 2, //返回层数，2则上上页
							success() {
								uni.$emit('update', {
									msg: '页面更新'
								})
							},
						})
					}, 1500)
				}).catch(err => {})
			},
			onfocus(e) {
				this.changeFoucs = 0
			},
			changePrice(e) {
				if (e > Number(this.info.price)) {
					uni.showToast({
						title: "退款金额不得大于商品价格！",
						icon: 'none'
					})
					this.FormData.refund_amount = this.info.price
				}
			},
			confirmSelect(e) {
				this.FormData.refund_amount = this.info.price
				this.selectObj = e.value[0]
				this.show = false
			},
			confirmReason(e) {
				this.FormData.reason = e.value[0].name
				this.showReason = false
			},
			gotoPath() {
				uni.navigateTo({
					url: '/subpackageA/orderservice/servicedetail'
				})
			},
			getsynqueryindex() {
				this.$api.synqueryindex({
					nu: this.info.nu
				}).then(res => {
					this.massageinfo = res.data.message
				})
			},
			getInfo() {
				this.$api.productOrderinfo({
					order_id: this.id
				}).then(res => {
					this.info = res.data
					this.value = res.data.price
					this.FormData.refund_amount = res.data.price
					this.FormData.proof = res.data.proof
					this.FormData.reason = res.data.reason
					this.FormData.order_id = res.data.order_id;
					this.FormData.apply_type = res.data.apply_type;
					this.FormData.return_no = res.data.return_no;
					this.FormData.describe = res.data.describe;
					this.FormData.product_id = res.data.product_id;
					this.FormData.mobile = res.data.address.mobile;
					if (res.data.apply_type > 0) {
						uni.setNavigationBarTitle({
							title: '售后详情'
						});
					}
				})
			},
			getReason() {
				this.$api.aftersalegetreason().then(res => {
					this.reasonList[0] = res.data
				})
			},
			replication(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
					}
				});
			},
			payOrder(id) {
				pay(id, 3, (() => {
					this.getInfo(id)
					this.open()
				}))
			},
			cancelOrder(order_id) {
				this.$api.productOrdercancel({
					order_id
				}).then(res => {
					this.getInfo()
				})
			},
			delOrder(order_id) {
				this.$api.productOrderdel({
					order_id
				}).then(res => {
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2]
					if (prevPage.$vm.updata != undefined) prevPage.$vm.updata()
					uni.navigateBack({
						delta: 1
					})
				})
			},
			buyAgain(obj) {
				console.log(obj);
				this.$api.productOrdercreate({
					product_id: obj.product_id,
					remark: obj.remark,
					address_id: obj.address_id
				}).then(res => {
					pay(res.data.order_id, 3)
				})
			},
			close() {
				this.$refs.popup.close()
			},
			open() {
				this.$refs.popup.open()
			},
			goHome() {
				this.close()
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			showDetail() {
				this.close()
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (e) => {
						uni.uploadFile({
							url: 'http://pray.veac.cn/api/attachment/upload',
							filePath: e.tempFilePaths[0],
							name: 'file',
							header: {
								'accessToken': this.$store.state.login.token
							},
							success: (uploadFileRes) => {
								this.FormData.proof = JSON.parse(uploadFileRes.data).data.path
							}
						});
					},
					fail: (e) => {
						if (e.errMsg.includes('No Permission')) this.$store.commit('permissions/goSystemSet', e
							.errCode)
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		z-index: -1;
	}

	.box {
		padding: 20rpx 30rpx 0 30rpx;
	}

	.header-box,
	.address-box,
	.apply-box,
	.service-box {
		background: #FEF1DC;
		border-radius: 20rpx;
		margin-bottom: 16rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.header-box {

		.goods {
			display: flex;
			padding: 40rpx 0 30rpx;
		}

		.line {
			height: 1rpx;
			background-color: #d3d3d3;
			transform: scaleY(0.5);
		}

		.ems-box {
			padding: 40rpx 0;
			display: flex;
			height: 30rpx;
			line-height: 30rpx;
			align-items: center;

			span {
				color: #111;
				margin: 0 10rpx;
			}
		}

		.img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 20rpx;
		}

		.text {
			flex: 1;
			padding: 0 0 0 10rpx;

			.top {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.bottom {
				padding-top: 10rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #AAAAAA;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.num {
			width: 150rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #D06122;
			line-height: 180rpx;
			text-align: right;
			font-style: normal;
		}
	}

	.address-box {
		padding: 36rpx 30rpx 32rpx;
		display: flex;

		.left-box {
			margin-right: 24rpx;
			flex-direction: column;
			align-items: center;
			align-self: center;
		}

		.right-box {
			display: flex;
			justify-content: space-between;
			flex: 1;

			.info-box {
				font-size: 28rpx;
				line-height: 36rpx;

				.big-text {
					color: #111111;
					margin-right: 20rpx;
				}

				.small-text {
					color: #999;
					font-size: 24rpx;
				}
			}

			.icon-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				align-self: center;
				margin-left: 6rpx;
			}
		}
	}

	.service-box {
		.item-box {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 0;
			font-size: 28rpx;
			color: #111111;
			line-height: 40rpx;
			height: 40rpx;
			border-bottom: 0.5rpx solid #979797;

			&:last-child {
				border: none;
			}

			.left-box {
				display: flex;

				.red-text {
					color: red;
					margin-left: 10rpx;
				}
			}

			.right-box {
				display: flex;

				.nodata {
					color: #999
				}
			}

		}

		.price-box {
			height: auto;
			display: block;

			.right-price {
				display: flex;
				padding-top: 26rpx;
				position: relative;

				.u-input {
					margin: 0 !important;
					padding: 0 !important;
					border: none !important;
					box-sizing: none !important;
					background: none;
					outline: none;
					color: #D06122;
					font-weight: 600;
					font-size: 48rpx;

					&:before {
						content: "¥";
						margin-right: 8rpx;
						font-size: 28rpx;
						height: 48rpx;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
					}
				}

				.tips-box {
					position: absolute;
					left: 180rpx;
					top: 30rpx;
					color: #999;
				}

				.num {
					width: 150rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #D06122;
					line-height: 180rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}
	}

	.apply-box {
		.top-box {
			padding: 40rpx 0 20rpx;
			display: flex;
			justify-content: space-between;

			.left-box {
				color: #111;
			}

			.right-box {
				color: #999;
			}
		}

		.tips-box {
			textarea {
				width: 100%;
				font-size: 28rpx;
				line-height: 32rpx;
				height: 120rpx;
			}
		}

		.upload-box {
			position: relative;
			padding-bottom: 40rpx;

			.u-upload {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 999;
				opacity: 0;
			}
		}
	}

	.mobile-box {
		padding-bottom: 20rpx;
	}

	.submit-btn {
		background: linear-gradient(to right, #FAAA7D, #EA6F29);
		width: calc(100% - 60rpx);
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		color: #fff;
		margin: 30rpx 30rpx 40rpx;
		border-radius: 42rpx;
	}
</style>